<template>
	<div class="">
		<div class="days">
			<ul class="items">
				<li  class="item" v-for="v,index in weekList">{{v}}</li>
			</ul>
			<ul class="items">
				<li class="item" 
				:class="{firstItem:initData.firstCount>0 && index<initData.firstCount,
				lastItem:initData.lastCount>0 && index>=initData.daysCount+initData.firstCount
				}" v-for="v,index in initData.list_days">{{v}}</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import {
		format_init
	} from "@/utils/base.js"
	export default {
		name:"recordePage",
		data() {
			let weekList="一二三四五六日"
			return {
				initData:{},
				weekList:weekList.split('')
			}
		},
		mounted() {
			this.initData = format_init()
			console.log(this.initData);
		}
	}
</script>

<style scoped>
	.days{
		width: 90vw;
		height: 50vh;
		margin: 0 auto;
		/* background-color: #ccc; */
		border: 1px solid #ff0;
	}
	.days .items{
		display: flex;
		align-items: center;
		justify-self: center;
		box-sizing: border-box;
		flex-wrap: wrap;
		padding: 0;
		margin: 0;
	}
	.days .item{
		list-style-type: none;
		width: calc(90vw/7);
		min-width:45px ;
		height: calc(100%);
		line-height: 45px;
		box-sizing: border-box;
		background-color: #ff0;
		border: 1px solid #00ffff;
	}
	.firstItem{
		background-color: #ccc !important;
	}
	.lastItem{
		background-color: #ccc !important;
	}
</style>